<template>
  <a-card>
    <div class="fd-product-search">
      <a-row>
        <a-col class="fd-list-title" :span="4">
          <div class="tabs-uhn">总数 <span>1000</span></div>
        </a-col>
        <a-col :span="6" :offset="14" >
          <a-input v-model="queryInfo" placeholder="请输入配方ID/产品编码查询" style="width: 100%" @change="query">
            <a-icon slot="prefix" type="search" />
          </a-input>
        </a-col>
      </a-row>
    </div>
    <div>
      <standard-table
        :columns="columns"
        :dataSource="dataSource">
        <div slot="action" slot-scope="{text, record}">
          <a-button type="link">下发配方</a-button>
          <a-button type="link">下发参数</a-button>
          <a-button type="link">注册校验</a-button>
          <a-button type="link">参数校验</a-button>
          <router-link :to="`puFormualDetail/detail/${record.id}`" >详情</router-link>
        </div>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import {debounce} from "@/utils/debounce"
const columns = [
  {
    title: 'Recipe ID',
    dataIndex: 'creator',
  },
  {
    title: 'PPID',
    dataIndex: 'no'
  },
  {
    title: '产品编号',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const dataSource = []

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    no: 'NO ' + i,
    description: '这是一段描述',
    callNo: Math.floor(Math.random() * 1000),
    status: Math.floor(Math.random() * 10) % 4,
    updatedAt: '2018-07-26',
    creator: 'admin'
  })
}

export default {
  name: 'QueryList',
  components: {StandardTable},
  data () {
    return {
      columns: columns,
      dataSource: dataSource,
      queryInfo: ''
    }
  },
  methods: {
    query: debounce(function() {
      const that = this;
      let filter = {};
      let params = {};
      let conditions = {};
      conditions.contains = that.queryInfo;
      filter.name = conditions;
      params.filter = filter;
      console.info("debounce", that.queryInfo)
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .fd-product-search{
    margin-bottom: 15px;
    .fd-list-title {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      color: #333333;
    }
  }
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  .tabs-uhn{
    width: 70%;
    text-align: center;
    color: #FFFFFF;
    padding:2px 0px;
    box-shadow: 3px 3px 3px#E7EAED;
    border-radius: 9px;
    background-color: #0182FE;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
